import React, { PureComponent } from 'react'
import { List, Avatar, Switch, Alert, Badge, Icon, Tooltip } from 'antd'
import { withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro'
import styles from './List.less'

@withI18n()
class Listcomp extends PureComponent {
  render() {
    const {
      i18n,
      select,
      setloading,
      hadauths,
      setauths,
      ...tableProps
    } = this.props
    let hadauthsstr = hadauths ? JSON.stringify(hadauths) : ''
    // const columns = [
    //   {
    //     title: i18n.t`Image`,
    //     dataIndex: 'image',
    //     render: text => <Avatar shape="square" src={text} />,
    //   },
    //   {
    //     title: i18n.t`Title`,
    //     dataIndex: 'title',
    //     render: text => (
    //       <Ellipsis tooltip length={30}>
    //         {text}
    //       </Ellipsis>
    //     ),
    //   },
    // ]
    // console.log(hadauthsstr)
    return (
      <List
        size="small"
        {...tableProps}
        style={{ margin: '10px', marginTop: '10px' }}
        renderItem={item => {
          let checked = hadauthsstr.indexOf(`"${item.Auth}"`) != -1
          return (
            <List.Item
              actions={[
                <Switch
                  checked={checked}
                  onChange={check => {
                    setauths({
                      rolename: select,
                      key: item.Auth,
                      status: check,
                    })
                  }}
                />,
              ]}
            >
              <List.Item.Meta
                title={
                  item.Warning ? (
                    <Tooltip title={item.Warning}>
                      <span>
                        {item.Description}
                        {
                          <Icon
                            type="exclamation-circle"
                            style={{ color: '#f5222d', marginLeft: '5px' }}
                          />
                        }
                      </span>
                    </Tooltip>
                  ) : (
                    <span>{item.Description}</span>
                  )
                }
                description={item.Auth}
              />
            </List.Item>
          )
        }}
        // scroll={{ x: 1200 }}
        className={styles.table}
        // columns={columns}
        simple
        rowKey={record => record.id}
      />
    )
  }
}

export default Listcomp
